<template>
	<m-layout title="重置登錄密碼" gap="24">
		<m-block radius="20">
			<view class="top">
				<view class="text">重置登錄密碼</view>
				<view class="text1">請使用啟動碼設定或修改密碼</view>
			</view>
			<view class="from">
				<!-- <m-block gap="0 24 0 35" spa="0 0 30" radius="100" class="flex-between">
					<m-fromItem border="0" icon="icon-youxiang" iconColor="#999999" placeholder="请输入手机号"
						v-model="username" :disabled="type==2" />
					<view class="p-12" v-if="changeShow" @click="changeWay()">
						<m-icon type="icon-qiehuan"></m-icon>
					</view>
				</m-block>
				<m-block gap="0 24 0 35" spa="0 0 30" radius="100" class="code">
					<m-fromItem border="0" icon="icon-yanzhengma1" iconColor="#999999" placeholder="请输入验证码"
						v-model="code">
						<m-sendCode slot="right" :value="username"></m-sendCode>
					</m-fromItem>
				</m-block> -->
				<m-block gap="0 24 0 35" spa="0 0 30" radius="100">
					<m-fromItem border="0" type="text" icon="icon-mima" iconColor="#999999" placeholder="請輸入啟動碼"
						v-model="username" />
				</m-block>
				<m-block gap="0 24 0 35" spa="0 0 30" radius="100">
					<m-fromItem border="0" type="password" icon="icon-mima" iconColor="#999999" placeholder="請輸入密碼"
						v-model="password" />
				</m-block>

				<m-block gap="0 24 0 35" spa="0 0 30" radius="100">
					<m-fromItem border="0" type="password" icon="icon-mima" iconColor="#999999" placeholder="請再次輸入密碼"
						v-model="password2" />
				</m-block>

				<view style="margin-top: 60rpx;margin-bottom: 53rpx;">
					<m-button @click="submit">確定</m-button>
				</view>
			</view>
		</m-block>
	</m-layout>
</template>

<script>
	import { email, mobile } from '@/libs/fn/verify.js' // 引入验证工具库
	import { Retrieved, SetPassword } from "@/api/Users.js" // 引入找回密码接口
	import { mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {
				type: 1, // 2 修改  1 重置
				username: '',
				password: '',
				password2: '',
				code: '',
				codeLoading: false,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			}),
			//是否有切换按钮
			changeShow() {
				// return true;
				return this.userinfo.phone && this.userinfo.emaill
			},
		},
		watch: {
		},
		onLoad(option) {
			console.log(option)
			this.type = option.type || 1;
			if (option.type == 2) {
				this.$nextTick(() => {
					this.username = this.userinfo.phone || this.userinfo.email;
				})
			}
		},
		methods: {
			changeWay() {
				if (this.username == this.userinfo.emaill) {
					this.username = this.userinfo.phone
				} else {
					this.username = this.userinfo.emaill
				}
				this.code = '';
			},
			///////////////////////////////////// 点击事件 ////////////////////////////////////////

			///////////////////////////////////// 组件监听 ////////////////////////////////////////
			// 再次输入密码监听
			secondary() {
				if (this.password != this.password2) {
					this.Toast('兩次密碼輸入不一致')
					this.password2 = "";
				}
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			// 提交
			async submit() {
				// if (!email(this.username) && !mobile(this.username))return this.Toast('请输入正确的手机号或者邮箱')
				// if (!this.code) return this.Toast('请输入验证码')
				if (!this.username) return this.Toast('請輸入啟動碼')
				if (!this.password)return this.Toast('請輸入密碼')
				if (this.password != this.password2)return this.Toast('兩次密碼輸入不一致')
				const success = await SetPassword({
					imei:this.username,
					token: this.username,
					password: this.password,
				})
				await this.sleep(1000);
				if (success) return this.Jump()
			},
		}
	}
</script>

<style lang="scss">
	input {
		font-size: 28rpx;
	}

	.top {
		background: url('@/static/images/pages/login/retrieved_img.png') no-repeat;
		background-size: 100% 100%;
		padding: 28rpx 36rpx;
		color: #FFFFFF;

		.text {
			font-size: 50rpx;
			font-weight: bold;
		}

		.text1 {
			font-size: 28rpx;
			font-weight: 400;
		}
	}

	.from {
		border-radius: 60rpx 60rpx 0 0;
		background-color: #FFFFFF;
		padding: 35rpx 24rpx;
		overflow: hidden;

		.block {
			background: #F6F6F6;
		}

		.from-item {
			margin: 0;
		}

		.code {
			.from-item {
				padding: 15rpx 0;
			}
		}
	}
</style>